
<template>
  <div class='goodQuery'>
    <div class="btn">
      <el-button type="primary" @click="onAdd" v-btn="'system:goods:goodsInfo:add'">添加商品</el-button>
      <el-button type="success" v-btn="'system:goods:goodsInfo:update'">更新商品</el-button>
      <el-button type="danger" v-btn="'system:goods:goodsInfo:delete'">删除商品</el-button>
    </div>
    <div class="coutenr">
      <el-table
        :data="state.goodsList.slice((state.currentPage - 1) * state.pageSizes, state.currentPage * state.pageSizes)"
        border>
        <el-table-column prop="id" label="编号" width="60px"></el-table-column>
        <el-table-column prop="index" label="商品图片" width="110px">
          <template #default="scope">
            <img :src="scope.row.image" alt="" class="goods_image">
          </template>
        </el-table-column>
        <el-table-column prop="goodsCategoryName" label="商品类型"></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="description" label="商品介绍" width="300px"></el-table-column>
        <el-table-column prop="defaultPrice" label="商品价格" sortable width="110px"></el-table-column>
        <el-table-column prop="calorieNum" label="库存" sortable width="110px"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.isSell" size="large" active-text="上架" inactive-text="下架" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="onUpdata(scope.row)">编辑</el-button>
            <el-button type="text">查看</el-button>
            <el-button type="text" @click="onDelGoods(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="total,sizes,jumper,prev, pager, next" :total="state.goodsList.length"
        :current-page="state.currentPage" :page-sizes="[5, 10, 20, 50, 100]" @current-change="handelCurrentChange"
        @size-change="handelSizesChange" />
    </div>

    <!-- 添加 编辑 弹窗 -->
    <el-dialog v-model="state.goodsAddShow" :title="state.goodsAddShowTitle" width="30%" :before-close="handleClose">
      <div class="item">
        <el-form label-position="top" :model="state.goodsInfo">
          <el-form-item label="商品图片">
            <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="state.imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.goodsAddShow = false">关闭</el-button>
          <el-button type="primary" @click="onGoodsAdd">
            {{ state.goodsAddShowTitle }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue'
// api
import {
  // 分页查询
  getGoodsAdmins,
  // 根据商品id查询
  getGoodsAdminById,
  // 添加
  addGoodsAdmin,
  // 更新
  updateGoodsAdmin,
  // 上架或下架商品
  updateSellStatus,
  // 批量删除
  deleteGoodsAdmins,
  // ************ 商品属性 ************* //
  // 设置商品的默认属性
  setDefaultPropertyOfGoods,
  // 添加商品属性
  addGoodsProperty,
  // 更新商品属性
  updateGoodsProperty,
  // 批量商品属性
  deleteGoodsProperty,
} from '@/api/view/goods'
import {
  // 所有商品类别
  getAllGoodsCategoryAdmins,
  // 添加
  addGoodsCategoryAdmin,
  // 显示或隐藏该类商品
  updateGoodsCategoryShowStatus,
  // 批量删除
  deleteGoodsCategoryAdmins
} from '@/api/view/goodsCategory'
// 添加断言
import { ComponentInternalInstance, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance
// 属性
const state = reactive({
  // 列表
  goodsList: [],
  // 显示 页码
  currentPage: 1,
  pageSizes: 5,
  goodsAddShow: false,
  goodsAddShowTitle: '',
  goodsInfo: {
    id: 0,
    name: '',
    isSell: '',
    image: '',
    calorieNum: 0,
    defaultPrice: 0,
    description: '',
    displayOrder: 0,
    goodsCategoryName: '',
    goodsPropertyList: []
  }
})

onMounted(() => {
  onGetGoodsAdmins()
})
// 商品的增删改
// 获取 商品列表数据
const onGetGoodsAdmins = () => {
  getGoodsAdmins(state.currentPage, state.pageSizes).then(res => {
    console.log(res);
    state.goodsList = res.data.records
  })
}


// 打开弹窗
const onAdd = () => {
  state.goodsAddShow = true
  state.goodsAddShowTitle = '添加商品'
}
const onUpdata = () => {
  state.goodsAddShow = true
  state.goodsAddShowTitle = '编辑商品'
}






// 新增商品
const onGoodsAdd = () => {

}
// 删除
const onDelGoods = (Id: number) => {
  proxy?.$confirm('确定要删除该商品吗?').then(() => {
    deleteGoodsAdmins([Id]).then(res => {
      if (res.data === 1) {
        proxy?.$Notify.success('删除成功!')
        onGetGoodsAdmins()
      }
    })
  })

}
// 改变页码数
const handelCurrentChange = (val: number) => {
  state.currentPage = val
}
// 改变当前条数
const handelSizesChange = (val: number) => {
  state.pageSizes = val
  onGetGoodsAdmins()
}
</script>
<style lang='less' scoped>
.btn {
  margin-bottom: 20px;
}

.goods_image {
  width: 80px;
  height: 80px;
}

.pagination {
  margin-top: 20px;
  float: right;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px solid red !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>